<template>
  <view class="page" v-if="homeId">
    <img src="/static/img/bg.png" alt class="hubg" />
    <view class="box">
      <view class="sfztitle">刷脸开门</view>
      <view class="english">Open the door way</view>
      <image
        src="https://cloudhouse.mynatapp.cc/anxinsu/app/common/acNavigation.jpg"
        mode="widthFix"
        class="img"
      />
      <view class="time">剩余时间:{{ time }}</view>

      <view @click="opendoor" class="opendoor"> 还打不开门怎么办? </view>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
var _self;

export default {
  data() {
    return {
      time: "",
      datas: "",
	  keting:'',
	  homeId:''
    };
  },
  computed: {
    ...mapState({
      user: "user",
    }),
  },
  created() {
    this.getOrderInfo();
  },
  onLoad(options){
	  this.homeId=options.homeId
  },
  methods: {
   async opendoor() {
     let lockres = await this.$http
     	.get(
     		"/platform/room/select", {
     			homeId: this.homeId,
     			platformSourceType: 5,
     		}, {
     			header: {
     				"content-type": "application/json;charset=UTF-8",
     			} /* 会覆盖全局header */ ,
     			dataType: "json",
     			responseType: "text",
     		}
     	)
     	console.log(lockres)
     if (lockres.data.data) {
     	this.keting = lockres.data.data
     } else {
     	this.keting = {
     		extColA: ''
     	};
     }
     uni.navigateTo({
     	url: "/pages/opendoor/opendoor?extColA=" + this.keting.extColA,
     });
    },
    getOrderInfo() {
      wx.showLoading({
        title: "加载中",
        mask: true,
      });
      this.$http
        .post(
          "/app/getOrderInfo",
          this.$qs.stringify({
            tenantPhoneNumber: this.user,
          }),
          {
            header: {} /* 会覆盖全局header */,
            dataType: "json",
            responseType: "text",
          }
        )
        .then((res) => {
          wx.hideLoading();
          setTimeout(function () {
            wx.stopPullDownRefresh();
          }, 500);
          let datas = res.data;
          if (datas.code == 0) {
            this.entryTime = this.$moment(
              datas.data.orderList.entryTime
            ).format("YYYY/MM/DD HH:mm");
            this.leaveTime = this.$moment(
              datas.data.orderList.leaveTime
            ).format("YYYY/MM/DD HH:mm");
            this.key = [];
            this.order = "";
            console.log(datas.data.orderList);
            this.pwdSwitchStatus = datas.data.orderList.pwdSwitchStatus;
            if (!datas.data.orderList) {
              return;
            }
            this.order = datas.data.orderList;

            console.log(234234);
            let data = datas.data.orderList;
            // if (!data.openKey && this.order.openKeyType != 2) {
            // 	return;
            // }
            let key = data.openKey;
            if (this.order.openKey) {
              this.key = this.order.openKey.split("");
            }

            let start = new Date(this.$moment(this.order.entryTime)).getTime();
            let end = new Date(this.$moment(this.order.leaveTime)).getTime();
            let now = new Date().getTime();
            let bi = ((end - now) / (end - start)).toFixed(2);
            var hao =
              new Date(this.$moment(this.order.leaveTime)).getTime() -
              new Date().getTime();
            //计算出小时数
            var days = Math.floor(hao / (24 * 3600 * 1000));
            var leave1 = hao % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
            var hours = Math.floor(leave1 / (3600 * 1000));
            //计算相差分钟数
            var leave2 = hao % (3600 * 1000); //计算小时数后剩余的毫秒数
            var minutes = Math.floor(leave2 / (60 * 1000));
            //计算相差秒数
            var leave3 = hao % (60 * 1000); //计算分钟数后剩余的毫秒数
            var seconds = Math.round(leave3 / 1000);
            this.time =
              days * 24 + hours + "小时" + minutes + "分钟" + seconds + "秒";
            console.log(this.time);
            console.log(2343);
            this.data = {
              series: [
                {
                  name: "剩余时间",
                  data: bi,
                  color: "#4382FF",
                },
              ],
            };

            _self = this;
            this.cWidth3 = uni.upx2px(300); //这里要与样式的宽高对应
            this.cHeight3 = uni.upx2px(300); //这里要与样式的宽高对应
            this.arcbarWidth = uni.upx2px(24);

            this.inter = setInterval(() => {
              this.gettime(this.order);
            }, 1000);
          } else {
            this.key = [];
            this.order = "";

            wx.showToast({
              image: "/static/img/warn.png",
              title: data.msg,
              duration: 2000,
              mask: true,
            });
          }
        });
    },
    gettime(options) {
      if (!this.order) {
        return;
      }
      let start = new Date(this.$moment(this.order.entryTime)).getTime();
      let end = new Date(this.$moment(this.order.leaveTime)).getTime();
      let now = new Date().getTime();
      let bi = ((end - now) / (end - start)).toFixed(2);
      var hao =
        new Date(this.$moment(this.order.leaveTime)).getTime() -
        new Date().getTime();
      var hao =
        new Date(this.$moment(this.order.leaveTime)).getTime() -
        new Date().getTime();
      //计算出小时数
      var days = Math.floor(hao / (24 * 3600 * 1000));
      var leave1 = hao % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
      var hours = Math.floor(leave1 / (3600 * 1000));
      //计算相差分钟数
      var leave2 = hao % (3600 * 1000); //计算小时数后剩余的毫秒数
      var minutes = Math.floor(leave2 / (60 * 1000));
      //计算相差秒数
      var leave3 = hao % (60 * 1000); //计算分钟数后剩余的毫秒数
      var seconds = Math.round(leave3 / 1000);
      this.time =
        days * 24 + hours + "小时" + minutes + "分钟" + seconds + "秒";
      this.data = {
        series: [
          {
            name: "剩余时间",
            data: bi,
            color: "#4382FF",
          },
        ],
      };
      if (this.order.openKey) {
        this.key = this.order.openKey.split("");
      }
      _self = this;
      this.cWidth3 = uni.upx2px(300); //这里要与样式的宽高对应
      this.cHeight3 = uni.upx2px(300); //这里要与样式的宽高对应
      this.arcbarWidth = uni.upx2px(24);
    },
  },
};
</script>

<style>
page {
  background: #eff1f2 !important;
}
</style>
<style scoped>
.sfztitle {
  font-size: 54rpx;
  font-family: Alibaba PuHuiTi;
  font-weight: 500;
  text-align: center;
  margin-top: 20rpx;
}
.english {
  font-size: 44rpx;
  font-family: Alibaba PuHuiTi;
  font-weight: 500;
  color: rgba(243, 244, 255, 1);
  text-align: center;
}
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10px;
}
.hubg {
  position: fixed;
  top: 0;
  height: 300rpx;
  z-index: -1;
  width: 100%;
}
.box {
  padding: 20rpx;
  border-radius: 8px 8px 8px 8px;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.img {
  width: 400rpx;
}
.opendoor {
  margin-top: 10px;
  color: #ff9125;
  margin-bottom: 40px;
}
.time {
  text-align: center;
  color: #4382ff;
  margin-top: 10px;
}
</style>